<template>
  <div class="page-box">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item label="分类名称" prop="catename">
          <el-input
            size="small"
            placeholder="请输入分类名称"
            v-model="queryData.catename"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            class="blueBtn"
            @click="searchSubmit"
            >搜索</el-button
          >
          <el-button size="small" icon="el-icon-refresh" @click="searchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 新增、导出、右侧按钮 -->
      <el-row :gutter="20" type="flex" justify="space-between">
        <!-- 新增、导出按钮 -->
        <AddBtn @changeShow="changeShow" ref="addForm" />
        <!-- 右侧图标 -->
        <RightIcon />
      </el-row>
      <br />

      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#" width="40"> </el-table-column>
        <el-table-column prop="id" label="分类ID" width="180">
        </el-table-column>
        <el-table-column prop="catename" label="分类名称"></el-table-column>
        <el-table-column prop="icon" label="图标class"> </el-table-column>
        <el-table-column prop="icon" label="权重"> </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="{ row }">
            <!-- {{ row }} -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              style="text-align: center"
              @click="editCate(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delCate(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="queryData.page"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 30, 50, 100]"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- dialog 弹窗 -->
    <el-dialog :title="title" :visible.sync="isShow" width="40%">
      <el-form
        :model="formData"
        ref="form"
        :rules="formRules"
        label-width="85px"
        :inline="false"
        size="small"
      >
        <el-form-item label="分类名称" prop="catename">
          <el-input
            style="width: 500px"
            v-model="formData.catename"
            placeholder="请输入分类名"
          ></el-input>
        </el-form-item>

        <el-form-item label="图标class" prop="icon">
          <el-input
            style="width: 200px"
            v-model="formData.icon"
            placeholder="请输入class名"
          ></el-input
          >&nbsp;&nbsp;&nbsp;
          <el-link href="http://www.baidu.com" target="_blank"
            >具体参见fontawesome图标库</el-link
          >
        </el-form-item>

        <el-form-item label="排序大小" prop="sort_num">
          <el-input-number
            v-model="formData.sort_num"
            :min="1"
            :max="999"
          ></el-input-number>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="isShow = false">取消</el-button>
          <el-button size="small" type="primary" @click="addCate"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import AddBtn from "@/components/AddBtn";
import RightIcon from "@/components/RightIcon";
import {
  addCateApi,
  delCateApi,
  editCateInfoApi,
  getAllCateApi,
  getCateInfoApi,
} from "@/api/cate";
export default {
  components: { Pagination, AddBtn, RightIcon },
  data() {
    return {
      // 分类名称
      tableData: [],
      total: 0,
      queryData: {
        page: 1,
        limit: 10,
        current: 1,
        pageSize: 10,
        catename: "",
      },
      formData: {
        catename: "",
        icon: "",
        sort_num: "",
      },
      formRules: {
        name: [{ required: true, message: "请输入分类名", trigger: "blur" }],
        iconClass: [
          { required: true, message: "请输入图标名", trigger: "blur" },
        ],
      },
      // 开关变量
      isShow: false,
    };
  },
  created() {
    this.getAllCate();
  },
  computed: {
    title() {
      return this.formData.id ? "修改分类" : "添加分类";
    },
  },
  methods: {
    // 获取页面数据
    async getAllCate() {
      let res = await getAllCateApi(this.queryData);
      // console.log(res);
      this.tableData = res.data;
      // 总数赋值
      this.total = res.count;
    },
    // 页面切换事件
    currentChange(val) {
      this.queryData.page = val;
      this.getAllCate();
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val;
      this.getAllCate();
    },

    // 搜索事件
    searchSubmit() {
      this.queryData.page = 1;
      this.getAllCate();
    },
    // 重置事件
    searchReset() {
      this.queryData = {
        page: 1,
        limit: 10,
        catename: "",
      };
      this.getAllCate();
    },
    // 新增按钮控制弹窗
    changeShow(val) {
      this.isShow = val;
    },

    // 添加分类功能
    async addCate() {
      try {
        // 1. 表单校验
        this.$refs.form.validate();
        // 2. 整理数据
        this.formData.id
          ? await editCateInfoApi(this.formData)
          : await addCateApi(this.formData);
        // 3. 成功提示
        this.$message.success(this.formData.id ? "修改成功" : "添加成功");
        // 4. 关闭弹窗
        this.$refs.form.clearValidate();
        this.formData = {};
        this.isShow = false;
        // 5. 更新列表
        this.getAllCate();
      } catch (error) {
        console.log(error);
      }
    },

    // 回显功能
    async editCate(id) {
      // 1. 获取信息
      let res = await getCateInfoApi(id);
      // console.log(res);

      // 2. 赋值操作
      this.formData = res;
      // 3. 打开弹窗
      this.isShow = true;
    },

    // 删除
    async delCate(id) {
      // 1. 确认框
      await this.$confirm("确定删除么？");
      // 2. 发起删除请求
      await delCateApi(id);
      // 3. 提醒成功
      this.$message.success("删除成功");
      // 4. 边缘处理
      if (this.queryData.page > 1 && this.tableData.length === 1) {
        this.queryData.page--;
        // this.getAllCate();
      }
      // 5. 重新获取页面
      this.getAllCate();
    },
  },
};
</script>

<style scoped>
/* 搜索按钮颜色样式 */
.blueBtn {
  background-color: #409eff;
  border: none;
}
.btnBox {
  margin-left: 10px;
}
.right-icon {
  margin-right: 10px;
}
/* 分页器在行末 */
.pagination {
  display: flex;
  flex-direction: row-reverse;
}
</style>